<template>
  <div>
    <v-card class='' fluid id="inspire">
      <v-app-bar
        class='white--text'
        color="primary"
        flat
      >
        <v-app-bar-nav-icon class='white--text' @click="drawer = true"></v-app-bar-nav-icon>
        <v-toolbar-title>我的团队</v-toolbar-title>
        <v-spacer/>
      </v-app-bar>
      <v-navigation-drawer
        v-model="drawer"
        absolute
        temporary
        class="pt-4 "
        color="accent"
      >
        <v-list>
          <v-list-item link>
            <v-list-item-content class='white--text'>
              <v-list-item-title class="text-h6">
                @{{user.name}}
              </v-list-item-title>
              <v-list-item-subtitle>{{user.email}}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <v-list
          nav
          flat
        >
          <v-list-group
            :value="true"
            v-model="selectedItem"
            color= 'white'
            prepend-icon="mdi-account-multiple"
          >
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>我的团队</v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item
              v-for="item in groupItem"
              :key="item.id"
              @click='selectGroup(item)'
              ripple
              link
            >
              <v-list-item-content>
                <v-list-item-subtitle v-text="item['GROUP_NAME']"></v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
            <v-divider></v-divider>
              <v-list-item>
                <v-btn
                  @click='showGroupDialog=true'
                  plain>
                  <v-list-item-icon>
                    <v-icon>mdi-plus</v-icon>
                  </v-list-item-icon>
                  <v-list-item-title>
                    新建团队
                  </v-list-item-title>
                </v-btn>
              </v-list-item>
            </v-list-group>
        </v-list>
      </v-navigation-drawer>
      <v-main class='pa-0' id='main'>
        <group-management
          :current-group='selectedItem'
          :user='user'
          @freshGroup='getGroups'
        />
      </v-main>
    </v-card>
    <create-group-dialog
      :dialog='showGroupDialog'
      @on-change-dialog='(val)=>this.showGroupDialog = val'
      @on-created='getGroups'
    >
    </create-group-dialog>
  </div>
</template>
<script>
  import GroupManagement from '@/components/group/GroupManagement'
  import groupApi from '@/api/apiPath/groupApi'
  import createGroupDialog from '@/components/group/CreateGroupDialog'

  export default {
    name: 'Group',
    props: {
      user: {
        default: {}
      }
    },
    components: {
      GroupManagement,
      createGroupDialog
    },
    data() {
      return {
        uploadDialog: false,
        drawer: false,
        selectedItem: {},
        groupItem: {},
        showGroupDialog: false
      }
    },
    watch: {
      selectItem: {
        handler(val) {
          console.log(val)
        }
      }
    },
    methods: {
      async getGroups() {
        const { data: result } = await groupApi.getGroupList({ id: this.user.id })
        this.groupItem = result
        this.selectedItem = {}
      },
      selectGroup(val) {
        this.selectedItem = val
      }
    },
    mounted() {
     this.getGroups()
    }
  }
</script>

<style scoped>
  #inspire{
    min-height: 600px;
  }
  #main{
    height: 100%;
  }
</style>
